<template>
  <img
    :src="enemyPlaneImg"
    :style="enemyPlaneStyle"
  />
</template>

<script>
import { watch, ref, computed, onMounted, onUnmounted } from "vue";
import enemyPlaneImg from "../assets/enemy.png";
export default {
  name: "Mybullet",
  props: ['x', 'y'],
  setup(props,context) {
    const x = ref(props.x);
    const y = ref(props.y)
    watch(props, (newVal) => {
      // console.log(1111111111)
      x.value = newVal.x
      y.value = newVal.y
      // console.log(enemyPlanes.value);
    });
    const enemyPlaneStyle = computed(()=>{
      return {
        top: y.value + 'px',
        left: x.value + 'px'
      }
    })
    let timer = null
    onMounted(()=>{
      timer = setInterval(()=>{
        // console.log(111)
        context.emit('attack', {
          x: x.value + 40,
          y: y.value + 70
        })
      }, 2000)
    })
    onUnmounted(()=>{
      clearInterval(timer)
      timer = null
    })
    return { enemyPlaneImg, enemyPlaneStyle };
  },
};
</script>

<style lang="stylus" scoped>
img
  position absolute
  width 100px
  height 70px;
</style>